<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>四月栈</title>
    <div th:replace="_fragments::basicrefrence"></div>
    <meta name="description" content="我自己的学习记录网站，博客中添加了我突发奇想写的的工具和小游戏。">
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <div class="ui attached inverted stackable menu">
        <div style="font-size: 40px" class="ui teal header item">四月栈</div>
        <a href="/" class="m-hide m-mobile-hide item" ><i class="home icon"></i>首页</a>
        <a href="/tool" class="m-hide m-mobile-hide item" ><i class="book icon"></i>工具</a>
        <a href="/types" class="m-hide m-mobile-hide item" ><i class="idea icon"></i>分类</a>
        <a href="/archives" class="m-hide m-mobile-hide item" ><i class="clone icon"></i>归档</a>
        <a href="/about" class="m-hide m-mobile-hide item" ><i class="info icon"></i>关于我</a>
        <!--                <a href="/login" class="m-hide m-mobile-hide item"><i class="eraser icon"></i>管理员登录</a>-->
        <div class="ui m-hide m-mobile-hide item" style=";right: 0;top: 25%">
            <div class="ui icon input right aligned">
                <input id="searchContent" type="text" value="" placeholder="搜索...."/>
                <i class="search link icon" onclick="buttonClick(0)" id="searchBtn"></i>
            </div>
        </div>
        <a id="menuShowBtn"  class="ui black icon button m-topRight m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </div>



    <div class="m-tenDistance">
        <div class="ui container">
            <div class="ui mobile reversed stackable grid">
                <!--左侧内容概览-->
                <div class="eleven wide column" id="blogListDiv"></div>


                <!--右侧标签栏-->
                <div class="five wide column" >
                    <!--分类栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column"><i class="options icon"></i>分类</div>
                                <div class="right aligned column"><a href="types">更多..</a></div>
                            </div>
                            <div class="ui fluid vertical menu" id="typesDiv"></div>
                        </div>
                    </div>


                    <!--标签栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column"><i class="tags icon"></i>标签</div>
                                <div class="right aligned column"><a href="#">没有更多..</a></div>
                            </div>
                            <div class="ui vertical segment">
                                <a class="basic item"><div class="ui teal basic label">其实我</div></a>
                                <a class="basic item"><div class="ui teal basic label">只有两</div></a>
                                <a class="basic item"><div class="ui teal basic label">个标签</div></a>
                                <a class="basic item"><div class="ui teal basic label">这里就</div></a>
                                <a class="basic item"><div class="ui teal basic label">不做了</div></a>
                                <a class="basic item"><div class="ui teal basic label">吧</div></a>
                            </div>
                        </div>
                    </div>

                    <!--最新栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column"><i class="bookmark icon"></i>不是最新</div>
                                <div class="right aligned column"><a href="#">没有更多..</a></div>
                            </div>
                            <div class="ui fluid vertical menu" id="newBlogDiv">

                            </div>
                        </div>
                    </div>


                    <!--二维码区-->
                    <h4 class="m-mobile-hide ui horizontal divider header tenMargin">一张图片</h4>
                    <div class="m-mobile-hide ui centered card" style="width: 200px">
                        <img src="images/mainPic.jpg" class="ui rounded image"/>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <footer th:replace="_fragments::guestfoot"></footer>


</body>

<script type="text/javascript">

    $("#menuShowBtn").click(function () {
        $(".m-hide").toggleClass('m-mobile-hide');
    })


    var blogListDiv = $('#blogListDiv');
    var searchContent = $('#searchContent');
    var newBlogDiv = $('#newBlogDiv');


    var currentPage = 1;
    var countPage = 0;
    function getTypeInfo() {
        $.ajax({
            url: "/listAllType",
            success : function (resp) {
                if (resp.code === 0) {
                    return;
                }
                for(let type of resp.data){
                    $('#typesDiv').append("<a href=\"types?typeId="  + type.id + "\" class=\"item\"> " + type.name + " </a>");
                }
            }
        });
    }

    function getPageInfo(next) {
        $.ajax({
            url:"/countAndPage",
            data: {
                page: currentPage,
                next: next,
                search: searchContent.val()
            },
            success : function (resp) {
                if (resp.code === 0) {
                    return;
                }
                currentPage = resp.data[0];
                countPage = resp.data[1];
                blogListDiv.append("<div class=\"ui center aligned bottom attached segment\">\n" +
                    "                        <button onclick=\"buttonClick(0)\" class=\"ui mini teal button\">首页</button>\n" +
                    "                        <button onclick=\"buttonClick(1)\" class=\"ui mini teal button\">上一页</button>\n" +
                    "                        <span style=\"font-size:20px;color: teal\" class=\"item\">|当前第 "+currentPage+"页 | 共 "+countPage+"页</span>\n" +
                    "                        <button onclick=\"buttonClick(2)\" class=\"ui mini teal button\">下一页</button>\n" +
                    "                        <button onclick=\"buttonClick(3)\" class=\"ui mini teal button\">尾页</button>\n" +
                    "                    </div>");
            }
        });
    }

    function blogInfo(page, next, search) {
        $.ajax({
           url:"/listBlogInPage",
           data:{
               page: page,
               next: next,
               search: search
           },
           success : function (resp) {
               if (resp.code === 0) {
                   return;
               }
               let blogList = resp.data;
               blogListDiv.empty();
               newBlogDiv.empty();
               blogListDiv.append("<div class=\"ui top attached segment \">\n" +
                   "                        <div class=\"ui two column grid\">\n" +
                   "                            <div class=\"column\">\n" +
                   "                                <h3 class=\"ui teal header\">博客</h3>\n" +
                   "                            </div>\n" +
                   "                            <div class=\"right aligned column\">\n" +
                   "                                <span style=\"font-size: 25px\" class=\"item\">共" + blogList.length + "个</span>\n" +
                   "                            </div>\n" +
                   "                        </div>\n" +
                   "                    </div>")
               for(let blog of blogList){

                   newBlogDiv.append("<a href=\"blog?id=" + blog.id + "\"class=\"item\">" + blog.title + "</a>");
                   let blogCreateDate = new Date(blog.updateDate);
                   let blogSegment = "<div class=\"ui attached segment\">\n" +
                       "                        <div  class=\"ui mobile reversed stackable grid\">\n" +
                       "                            <div class=\"eleven wide column\">\n" +
                       "                                <a href=\"/blog?id=" + blog.id + "\"><span  class=\"ui header m-title\">" + blog.title + "</span></a><br/>\n" +
                       "                                <a th:href=\"/blog?id=" + blog.id + "\" class=\"m-abstract\">" + blog.tip + "</a>\n" +
                       "\n" +
                       "                                <div  class=\"ui grid\">\n" +
                       "                                    <div class=\"twelve wide column\">\n" +
                       "                                        <div class=\"ui mini horizontal list\">\n" +
                       "                                            <div class=\"item\">\n" +
                       "                                                <img src=\"images/MyHead.jpg\" class=\"ui avatar image\">\n" +
                       "                                                <span class=\"content\">\n" +
                       "                                                    <a href=\"/about\">大地崩坏苍蝇兽</a>\n" +
                       "                                                </span>\n" +
                       "                                            </div>\n" +
                       "                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                       "                                            <div class=\"item\">\n" +
                       "                                                <i class=\"calendar icon\"></i>\n" +
                       "                                                <span class=\"label\">" + blogCreateDate.getFullYear() + "-" + (blogCreateDate.getMonth()+1) + "-" + blogCreateDate.getDate() + "</span>\n" +
                       "                                            </div>\n" +
                       "                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                       "                                            <div class=\"item\">\n" +
                       "                                                <i class=\"eye icon\"></i>\n" +
                       "                                                <span class=\"label\">" + blog.view + "</span>\n" +
                       "                                            </div>\n" +
                       "                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                       "                                            <div class=\"item\">\n" +
                       "                                                <i class=\"comment outline icon\"></i>\n" +
                       "                                                <span class=\"label\">"+ blog.commentNum + "</span>\n" +
                       "                                            </div>\n" +
                       "                                        </div>\n" +
                       "                                    </div>\n" +
                       "                                    <!--标签-->\n" +
                       "                                    <div class=\"right aligned four wide column\">\n" +
                       "                                        <label class=\"ui orange basic label\">"+(blog.tag=='1'?'原创':'搬运')+"</label>\n" +
                       "                                    </div>\n" +
                       "                                </div>\n" +
                       "                            </div>\n" +
                       "\n" +
                       "                            <div class=\"five wide column\">\n" +
                       "                                <a href=\"/blog?id="+blog.id+"\" target=\"_blank\">\n" +
                       "                                    <img src=\""+blog.picture+"\" class=\"ui rounded image centered\" width=\"150\" height=\"150\"/>\n" +
                       "                                </a>\n" +
                       "                            </div>\n" +
                       "                        </div>\n" +
                       "                    </div>";
                   blogListDiv.append(blogSegment);
               }
               window.scroll(0, 0);
               // $('html, body').animate({
               //     scrollTop: 0
               // }, 200);
               getPageInfo(next);
           }
        });
    }

    function buttonClick(next) {
        blogInfo(currentPage,next,searchContent.val());
    }
    searchContent.on("keypress ",function(event) {
        if (event.which === 13) {
            buttonClick(0);
        }
    });

    buttonClick(0);
    getTypeInfo();

</script>



</html>